<template>
  <div class="popup">
    <van-search v-model="value" show-action :placeholder="placeholder" @search="onSearch">
      <template #action>
        <div @click="onCancel">取消</div>
      </template>
    </van-search>

    <!-- <keep-alive> -->
    <Searching :search="search" v-show="value" @changeSearch="changeSearch" />
    <div v-show="!value">
      <product v-if="getShowList" @pricesort="pricesort" @category="category" />
      <Search v-else @keyword="keyword" />
    </div>
    <!-- </keep-alive> -->
  </div>
</template>
 
<script>
import Search from "./Search";
import Product from "./Product";
import Searching from "./Searching";
import { GetSearch, GetGoodList, SearchAPI } from "@/request/api";
export default {
  data() {
    return {
      value: "",
      search: "",
      placeholder: "请输入",
      defaultKeyword: {},
      hotKeywordList: [],
      historyKeywordList: [],
      goodsList: [],
      page: 1,
      size: 20,
      order: "desc",
      categoryId: 0,
      sort:"id",
    };
  },
  components: {
    Search,
    Product,
    Searching,
  },
  watch: {
    value(val, oval) {
      if (val != "") {
        SearchAPI({ keyword: val }).then((res) => {
          this.search = res.data;
        });
      } else {
        this.search = [];
      }
    },
  },
  computed: {
    getShowList() {
      return this.$store.state.showList;
    },
  },
  methods: {
    keyword(arg) {
      this.placeholder = arg;
    },
    // 排序
    pricesort(arg){
      this.order=arg;
      this.sort="price";
      this.onSearch();
    },
    category(arg){
      this.categoryId=arg;
      this.onSearch();
    },
    onSearch() {
      GetGoodList({
        keyword: this.value,
        page: this.page,
        size: this.size,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort
      }).then((res) => {
        this.$store.commit("Search", res.data.goodsList);
        this.value = "";
      });
    },
    onCancel() {
      this.$router.back();
      this.$store.commit("changeShowPopup", false);
    },
    changeSearch() {
      this.search = [];
      this.value = "";
    },
  },
  created() {
    GetSearch().then((res) => {
      this.historyKeywordList = res.data.historyKeywordList;
      this.hotKeywordList = res.data.hotKeywordList;
      this.defaultKeyword = res.data.defaultKeyword;
    });
  },
};
</script>
 
<style lang = "less" scoped>
.popup {
  position: fixed;
  top: 0;
  background: #efefef;
  width: 100%;
  height: 100%;
  z-index: 666;
  overflow: scroll;
}
</style>